<template>
	<div>
		<a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
			<a-row :gutter="24">
				<a-col :span="8">
					<a-form-item label="关键字">
						<a-input autocomplete="off" class="field-right" placeholder="请输入团队编号/团队名称/活动主题"
							v-decorator="[`key`]" />
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="申请类型">
						<a-select :allowClear="true" v-decorator="['applyType']" placeholder="全部"
							optionFilterProp="children" showSearch>
							<a-select-option v-for="(item, index) in ApplyTypeList" :key="item.Key" :value="item.Key">
								{{ item.Value }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item label="实践类型">
						<a-select :allowClear="true" v-decorator="['typeID']" placeholder="全部"
							optionFilterProp="children" showSearch>
							<a-select-option v-for="(item, index) in TypeIDList" :key="item.ID" :value="item.ID">
								{{ item.Name }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<!-- <a-col :span="8">
					<a-form-item label="状态">
						<a-select
							:allowClear="true"
							v-decorator="['state']"
							placeholder="全部"
							optionFilterProp="children"
							showSearch
						>
							<a-select-option v-for="(item, index) in stateData" :key="item.ID" :value="item.ID">{{ item.Value }}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col> -->
				<a-col :span="8">
					<a-form-item label="所属学院">
						<a-select v-decorator="['departCode']" placeholder="全部" showSearch optionFilterProp="children">
							<a-select-option v-for="(item, index) in DepartCodeList" :key="item.Code"
								:value="item.Code">{{ item.Name }}</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<ClubSearch :span="8" label="申请人" v-if="currentState==1" name="applyUserNo" ref="applyUserNo"
					@tap="searchValueFun"></ClubSearch>
				<ClubSearch :span="8" label="成员" v-if="currentState==0" name="memberUserNo" ref="memberUserNo"
					@tap="searchValueFun"></ClubSearch>
				<a-col :span="8" v-if="currentState==1">
					<a-form-item label="是否通过">
						<a-select :allowClear="true" v-decorator="['isAdopt']" placeholder="全部"
							optionFilterProp="children" showSearch>
							<a-select-option v-for="(item, index) in isAdoptList" :key="item.Key" :value="item.Key">
								{{ item.Value }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8" v-if="currentType=='user'||currentType=='manager'">
					<a-form-item label="假期">
						<a-select v-decorator="['sessionID']" placeholder="全部" optionFilterProp="children" showSearch
							@change="SessionIDFun">
							<a-select-option v-for="(item, index) in SessionIDList" :key="item.ID" :value="item.ID">
								{{ item.Name }}
							</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="16" v-if="!$route.path.includes('Home')">
					<a-button type="primary" @click="handleSearch">搜索</a-button>
					<a-button @click="handleReset">重置</a-button>
					<a-button type="primary" @click="allApplyHander"
						v-if="(currentType=='collegeFlow'&&currentState==0) || (currentType=='schoolFlow'&&currentState==0)">
						批量审核</a-button>
					<!-- <a-button type="primary"
						v-if="data.length==0 && form.getFieldValue('sessionID') && currentState==0 &&currentType=='user'&&IsCanAply"
						@click="seeList({}, 1)">注册团队</a-button> -->
					<!-- 2023.2.7 嫌隐藏太深  在表单控制-->
					<a-button type="primary" v-if="currentState==0 &&currentType=='user'&&IsCanAply"
						@click="seeList({}, 1)">注册团队</a-button>
				</a-col>
				<a-col :span="8" style="margin-top:4px;">
					<a-button-group v-if="$route.path.includes('Home')">
						<a-button type="primary" @click="handleSearch" class="btn1">搜索</a-button>
						<a-button @click="handleReset" class="btn2">重置</a-button>
						<a-button type="primary" class="btn" @click="allApplyHander"
							v-if="(currentType=='collegeFlow'&&currentState==0) || (currentType=='schoolFlow'&&currentState==0)">
							批量审核</a-button>
						<a-button type="primary" class="btn"
							v-if="data.length==0 && currentState==0 &&currentType=='user'" @click="seeList({}, 1)">注册团队
						</a-button>
					</a-button-group>
				</a-col>
			</a-row>
		</a-form>
		<!-- <a-button-group class="btngroupoption option home-form"> -->

		<div :class="{'table':$route.path.includes('Home')}">
			<el-table :data="data" :border="$route.path.includes('Home')" v-loading="loading" highlight-current-row
				style="width: 100%;" v-show="currentType=='user'||currentType=='manager'">
				<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
				<el-table-column prop="No" label="团队编号" min-width="160" align="center"></el-table-column>
				<el-table-column prop="IsEnable" label="状态" min-width="130" align="center">
					<template slot-scope="scope">
						<a-tag
							:color="scope.row.State==1?'red':scope.row.State==2?'#ff7f27':scope.row.State==4?'green':scope.row.State==3?'red':'blue'">
							{{ scope.row.StateName }}
						</a-tag>
					</template>
				</el-table-column>
				<el-table-column prop="Title" label="团队名称" min-width="200"></el-table-column>
				<el-table-column prop="Theme" label="活动主题" min-width="260" align="center"></el-table-column>
				<el-table-column prop="SessionName" label="假期" min-width="200"></el-table-column>
				<el-table-column prop="Title" label="负责人" min-width="260" align="center">
					<template slot-scope="scope">{{ scope.row.ChargeUserName }} / {{ scope.row.ChargeUserNo }} /
						{{ scope.row.ChargeUserPhone }}</template>
				</el-table-column>
				<el-table-column prop="TypeName" label="实践类型" min-width="90" align="center"></el-table-column>
				<el-table-column prop="ApplyTypeName" label="申请类型" min-width="90" align="center"></el-table-column>
				<el-table-column prop="ThemeName" label="实践主题" min-width="190" show-overflow-tooltip></el-table-column>
				<el-table-column prop="DepartName" label="所属学院" min-width="90" align="center"></el-table-column>
				<el-table-column prop="CityName" label="活动地点" min-width="90"></el-table-column>
				<el-table-column label="操作" width="130" fixed="right" v-if="currentType=='user'&&currentState==1">
					<template slot-scope="scope">
						<div class="tableleft" v-if="$route.path.includes('Home')">
							<oprateBtn title="详情" icon="icon-xiangqing" color="#1890FF" @tap="seeList(scope.row, 3)">
							</oprateBtn>
						</div>
						<div class="user-btn" v-else>
							<span class="detail" @click="seeList(scope.row, 3)">详情</span>
							<a-dropdown>
								<a style="color: #4169E0;padding-left: 10px;" class="ant-dropdown-link" @click.prevent>
									更多<i
										style="font-size: 25px;position: relative;top:12px;left:5px !important;font-style: normal;">ˇ</i>
								</a>
								<template #overlay>
									<a-menu>

										<a-menu-item
											v-if="(scope.row.State==4||scope.row.State==5) && currentType=='user'"
											@click="goList(scope.row, 'PracticeTeamDeclare')">
											申报项管理
										</a-menu-item>

									</a-menu>
								</template>
							</a-dropdown>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="230" fixed="right" v-else>
					<template slot-scope="scope">
						<div class="tableleft" v-if="$route.path.includes('Home')">
							<oprateBtn title="申报项管理"
								v-if="(scope.row.State==4||scope.row.State==5) && currentType=='user'"
								icon="icon-xinjianzixiang" color="pink" @tap="goList(scope.row, 'PracticeTeamDeclare')">
							</oprateBtn>
							<oprateBtn title="撤回"
								v-if="!(scope.row.State==1 || scope.row.State==3||scope.row.State==5) && currentType=='user'"
								icon="icon-assist-cancel" color="red" @tap="setList(scope.row, 3)"></oprateBtn>
							<oprateBtn title="提交" v-if="currentType=='user'&&(scope.row.State==1||scope.row.State==3)"
								icon="icon-tijiao" color="pink" @tap="setList(scope.row, 2)"></oprateBtn>
							<oprateBtn title="详情" icon="icon-xiangqing" color="#1890FF" @tap="seeList(scope.row, 3)">
							</oprateBtn>
							<oprateBtn title="修改" v-if="scope.row.State==1 || scope.row.State==3" icon="icon-editor1"
								color="#1890FF" @tap="seeList(scope.row, 2)"></oprateBtn>
							<oprateBtn title="删除" icon="icon-delete" color="red" @tap="setList(scope.row,1)">
							</oprateBtn>
							<oprateBtn title="成员管理" icon="icon-chengyuan" color="green"
								@tap="goList(scope.row,'PracticeTeamMember')"></oprateBtn>
							<oprateBtn title="老师管理" icon="icon-laoshi" color="blue"
								@tap="goList(scope.row,'PracticeTeamTeacher')"></oprateBtn>
							<oprateBtn title="申报列表" icon="icon-julebu1" color="pink"
								@tap="goList(scope.row,'PracticeTeamDeclare')"></oprateBtn>
							
						</div>
						<div class="user-btn user-btn-auto" v-else>
							<span class="detail" @click="seeList(scope.row, 3)">详情</span>
							<!-- 	<span class="applicant" @click="goList(scope.row,'PracticeTeamDeclare')">申报列表</span> -->
							<a-dropdown>
								<a style="color: #4169E0;padding-left: 10px;" class="ant-dropdown-link" @click.prevent>
									更多<i
										style="font-size: 25px;position: relative;top:12px;left:5px !important;font-style: normal;">ˇ</i>
								</a>
								<template #overlay>
									<a-menu>
										<a-menu-item
											v-if="!(scope.row.State==1 || scope.row.State==3||scope.row.State==5||scope.row.State==4) && currentType=='user'"
											@click="setList(scope.row, 3)">
											撤回
										</a-menu-item>
										<a-menu-item
											v-if="currentType=='user'&&(scope.row.State==1||scope.row.State==3)"
											@click="setList(scope.row, 2,'chengyuan')">
											提交
										</a-menu-item>
										
										<a-menu-item
											v-if="(scope.row.State==4||scope.row.State==5) && currentType=='user'"
											@click="goList(scope.row, 'PracticeTeamDeclare')">
											申报项管理
										</a-menu-item>
										<a-menu-item v-if="scope.row.State==1 || scope.row.State==3"
											@click="seeList(scope.row, 2)">
											修改
										</a-menu-item>
										<a-menu-item v-if="scope.row.State==1 || scope.row.State==3"
											@click="setList(scope.row,1)">
											删除
										</a-menu-item>
										<a-menu-item v-if="scope.row.ApplyType==1" @click="goList(scope.row,'PracticeTeamMember')">
											成员管理
										</a-menu-item>
										<a-menu-item @click="goList(scope.row,'PracticeTeamTeacher')">
											老师管理
										</a-menu-item>
									</a-menu>
								</template>
							</a-dropdown>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<el-table :data="data" :border="$route.path.includes('Home')" v-loading="loading" highlight-current-row
				style="width: 100%;" @selection-change="handleSelectionChange"
				v-show="currentType!='user'&&currentType!='manager'">
				<el-table-column type="selection" width="55" fixed="left" v-if="currentState==0&&currentType!='userFlow'"></el-table-column>
				<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
				<el-table-column prop="TeamNo" label="团队编号" min-width="170" align="center"></el-table-column>
				<el-table-column prop="TeamTitle" label="团队名称" min-width="150"></el-table-column>
				<el-table-column prop="TeamTypeName" label="实践类型" min-width="100" align="center"></el-table-column>
				<el-table-column prop="DepartName" label="所属学院" min-width="120" align="center"></el-table-column>
				<el-table-column prop="AddTime" label="审核时间" min-width="150" align="center"></el-table-column>
				<!-- <el-table-column prop="IsEnable" label="状态" min-width="130" align="center" v-if="currentState!=0">
					<template slot-scope="scope">
						<a-tag
							:color="scope.row.State==1?'red':scope.row.State==2?'#ff7f27':scope.row.State==4?'green':scope.row.State==3?'red':'blue'">
							{{ scope.row.StateName }}</a-tag>
					</template>
				</el-table-column> -->
				<el-table-column prop="IsEnable" label="审核状态" min-width="130" align="center" v-if="currentState!=0">
					<template slot-scope="scope">
						<a-tag :color="scope.row.IsAdopt?'green':'red'">{{ scope.row.IsAdopt?'审核通过':'审核不通过' }}</a-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" min-width="180" fixed="right">
					<template slot-scope="scope">
						<div class="tableleft" v-if="$route.path.includes('Home')">
							<oprateBtn title="详情" icon="icon-xiangqing" color="#1890FF" @tap="seeList(scope.row, 3)">
							</oprateBtn>
							<oprateBtn title="审批" v-if="currentState==0" icon="icon-shenpi" color="red"
								@tap="seeList(scope.row, 4)"></oprateBtn>
							
							<oprateBtn title="修改" icon="icon-editor1" v-if="currentState==0&&IsAgreeUpdate"
								color="#1890FF" @tap="seeList(scope.row, 2)"></oprateBtn>
						</div>
						<div class="user-btn user-btn-auto" v-else>
							<!-- currentType!='userFlow'&& -->
							<span class="detail" @click="seeList(scope.row, 3)">详情</span>
							<span class="examine" v-if="currentState==0" @click="seeList(scope.row, 4)">审批</span>
							<span class="modify" v-if="currentState==0&&scope.row.IsAgreeUpdate" @click="seeList(scope.row, 2)">修改</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<pagination @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"
				:pagination="pagination"></pagination>
		</div>
		<add :text="text" v-show="addIf" :currentType="currentType" @shenpiFun="shenpiFun" @closeFun="closeFun"></add>
	</div>
</template>

<script>
	import add from './add';
	import pagination from '@components/pagination/index.vue';
	import ClubSearch from '@/components/SearchForm/ClubSearch.vue'
	import moment from 'moment';
	import {
		ManagePracticeTeam,
		UserPracticeTeam,
		CommonDoGetPracticeSessionList,
		UserPracticeTeamFlow,
		ManagePracticeTeamFlow,
		CommonDoGetPracticeTeamApplyTypeList,
		CommonDoGetPracticeTeamTypeList,
		GetDepartList,
		ManagePracticeTeamFlowDoGetPageList
	} from '@/api/follow';
	export default {
		props: {
			currentType: String,
			currentState: Number,
			flowTypeID: String,
			IsAgreeUpdate: Boolean
		},
		components: {
			add,
			pagination,
			ClubSearch
		},
		watch: {
			flowTypeID: function(flowTypeID) {
				// console.log(this.nowflowTypeID);
				this.flowTypeID = flowTypeID;
				//this.getList();
				// this.getOtherList1();
			}
		},
		data() {
			return {
				stateData: [{
						ID: '1',
						Value: '待提交'
					},
					{
						ID: '2',
						Value: '审核中'
					},
					{
						ID: '3',
						Value: '审核未通过'
					},
					{
						ID: '4',
						Value: '审核通过'
					}
				],

				data: [],
				loading: false,
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: this.global.pagination,
				addIf: false,
				text: {},
				values: {},
				SessionIDList: [],
				isAdoptList: this.global.isAdoptList,
				multipleSelection: [],
				ApplyTypeList: [],
				TypeIDList: [],
				DepartCodeList: [],
				IsCanAply: Boolean
			};
		},
		async created() {
			if (this.currentType != 'user' && this.currentType != 'manager') {
				this.getList();
			} else {
				this.getOtherList()
			}
			//this.getOtherList1();
			let that = this;
			if (that.currentState == 1) {
				setTimeout(function() {
					that.getOtherList1();
				}, 1000)
			} else {
				that.getOtherList1();
			}
			// console.log(this.$route)
		},
		methods: {
			moment,
			shenpiFun(text) {
				this.addIf = !this.addIf;
				this.text = {
					...text,
					listType: 4,
					// sessionID:this.form.getFieldValue('sessionID'),
					sessionID: text.SessionID,
					flowID: text.flowID,
					currentState: this.currentState,
					currentType: this.currentType,
					time: new Date()
				};
				this.addIf = !this.addIf;

				// this.addIf = false;
				// if (data == 1) {
				// 	this.getList();
				// }
			},
			searchValueFun(name, value) {
				this.values = {
					...this.values,
					[name]: value
				}
			},
			
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			allApplyHander() {
				if (this.multipleSelection.length == 0) {
					this.$message.error('请选择要处理的数据！')
					return false
				}
				this.seeList({
					ID: this.multipleSelection.map((item) => {
						return item.ID
					}).join(','),
					textArr: this.multipleSelection
				}, 4)
			},
			async getOtherList1() {
				let res1 = await CommonDoGetPracticeTeamApplyTypeList();
				this.ApplyTypeList = res1.data.data;
				let res2 = await CommonDoGetPracticeTeamTypeList();
				this.TypeIDList = res2.data.data;
				let res3 = await GetDepartList();
				this.DepartCodeList = res3.data.data;
			},
			async getOtherList() {
				let res = await CommonDoGetPracticeSessionList({
					isEnable: true
				})
				this.SessionIDList = res.data.data
				if (this.SessionIDList.length > 0) {
					// this.form.setFieldsValue({
					// 	sessionID:this.SessionIDList[0].ID
					// })
					this.getList()
				}
			},
			SessionIDFun(e) {
				this.IsCanAply = this.SessionIDList.filter(item => item.ID === e)[0].IsCanAply
				this.getList()
			},
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields((error, values) => {
					this.pagination.currentPage = 1;
					this.values = {
						...this.values,
						...values
					};
					this.getList();
				});
			},
			handleReset() {
				this.form.resetFields();
				if (this.$refs.applyUserNo) {
					this.$refs.applyUserNo.value = undefined
				}
				if (this.$refs.memberUserNo) {
					this.$refs.memberUserNo.value = undefined
				}
				this.values = {};
				this.getOtherList()
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getList();
			},
			async getList() {
				this.loading = true;
				let data = {};
				data = {
					...this.values,
					sessionID: this.form.getFieldValue('sessionID'),
					pageIndex: this.pagination.currentPage,
					pageSize: this.pagination.pageSize
				};
				let res = {};
				if (this.currentType == 'manager') {
					res = await ManagePracticeTeam('DoGetPageList', data);
				}
				if (this.currentType == 'user') {
					if (this.currentState == 0) {
						res = await UserPracticeTeam('DoGetApplyPageList', data);
					} else {
						res = await UserPracticeTeam('DoGetJoinPageList', data);
					}
				}
				if (this.currentType == 'userFlow') {
					if (this.currentState == 0) {
						res = await UserPracticeTeamFlow('DoGetTeacherExamPageList', data);
					} else {
						res = await UserPracticeTeamFlow('DoGetTeacherAlreadyExamPageList', data);
					}
				}
				if (this.currentType == 'collegeFlow') {
					data.flowTypeID = this.flowTypeID;
					if (this.currentState == 0) {
						data.isExam = false;
						res = await ManagePracticeTeamFlowDoGetPageList(data);
					} else {
						data.isExam = true;
						res = await ManagePracticeTeamFlowDoGetPageList(data);
					}
					// if (this.currentState == 0) {
					// 	res = await ManagePracticeTeamFlow('DoGetCollegeExamPageList', data);
					// } else {
					// 	res = await ManagePracticeTeamFlow('DoGetCollegeAlreadyExamPageList', data);
					// }
				}
				if (this.currentType == 'schoolFlow') {
					if (this.currentState == 0) {
						res = await ManagePracticeTeamFlow('DoGetSchoolExamPageList', data);
					} else {
						res = await ManagePracticeTeamFlow('DoGetSchoolAlreadyExamPageList', data);
					}
				}
				this.loading = false;
				this.data = res.data.data;
				const pagination = {
					...this.pagination
				};
				pagination.total = res.data.pageInfo.TotalItemCount;
				this.pagination = pagination;
			},
			seeList(text, listType) {
				this.text = {
					...text,
					listType: listType,
					flowID: text.ID,
					// sessionID:this.form.getFieldValue('sessionID'),
					sessionID: text.SessionID,
					currentType: this.currentType,
					currentState: this.currentState,

					time: new Date()
				};
				console.log(this.text)
				this.addIf = !this.addIf;
			},
			setList(text, type, type2) {
				if (type2 == 'chengyuan' && text.MemberNum < 2&& text.ApplyType==1) {
					this.$message.error('未添加成员，暂不能提交');
					return
				}
				let that = this;
				this.$confirm({
					title: '提示',
					content: type == 1 ? `您确定删除该数据吗？` : type == 2 ? `您确定提交该数据吗？` : `您确定撤回该数据吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {};
						data.id = text.ID;
						let res = {}
						if (that.currentType == 'manager') {
							res = type == 1 ? await ManagePracticeTeam('DoDelete', data) : type == 2 ?
								await ManagePracticeTeam('DoSubmit', data) : await ManagePracticeTeam(
									'DoReturn', data);
						}
						if (that.currentType == 'user') {
							res = type == 1 ? await UserPracticeTeam('DoDelete', data) : type == 2 ?
								await UserPracticeTeam('DoSubmit', data) : await UserPracticeTeam('DoReturn',
									data)
						}
						that.$message[res.data.code == 0 ? 'success' : 'error'](res.data.msg);
						if (res.data.code == 0) {
							that.getList();
						}
					}
				});
			},
			goList(item, name) {
				this.$router.push({
					name: this.currentType == 'manager' ? name : 'User' + name,
					query: {
						ID: item.ID,
						State: item.State
					}
				});
			},
			closeFun(data) {
				this.addIf = false;
				if (data == 1) {
					this.getList();
					this.$emit('shenpiFunClose');
				}
			}
		}
	};
</script>
<style scoped>
	.table .el-pagination {
		margin: 40px 0 !important;
		text-align: right !important;
	}

	/deep/.el-table__fixed-right::before,
	.el-table__fixed::before {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background-color: #fff !important;
		z-index: 4;
	}
</style>
